
<template>
  <div class="workorder">
    <van-nav-bar
      title="工单详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="content">
      <van-cell-group>
        <van-field v-model="complete.type" label="设备类型" readonly />
        <van-field v-model="complete.status" label="工单状态" readonly />
        <van-field v-model="complete.engineer_name" label="项目名称" readonly />
        <van-field v-model="complete.device_name" label="设备名称" readonly />
        <template>
          <van-field
            v-if="complete.bill_why != null"
            v-model="complete.bill_why"
            label="申报原因"
            readonly
          />
          <van-field v-else value="暂无申报原因" label="申报原因" readonly />
        </template>
        <!-- <van-field v-model="complete.bill_why" label="申报原因" readonly /> -->

        <van-field name="image" label="申报图片">
          <template #input>
            <van-tag
              size="large"
              v-if="complete.begin_photos.length == 0"
              id="tag"
              >暂无申报图片
            </van-tag>
            <van-tag v-else>
              <img :src="complete.begin_photos[0]" class="pic" />
              <img :src="complete.begin_photos[1]" class="pic" />
              <img :src="complete.begin_photos[2]" class="pic" />
            </van-tag>
          </template>
        </van-field>

        <van-field name="uploader" label="处理现场">
          <template #input v-if="complete.status == '进行中'" class="pic">
            <van-uploader
              multiple
              deletable
              :fileList="imgList"
              :max-count="3"
              result-type="file"
              :after-read="afterRead"
            />
          </template>
          <template #input v-else>
            <van-tag size="small" v-if="complete.end_photos.length == 0"
              >无
            </van-tag>
            <van-tag v-else>
              <img :src="complete.end_photos[0]" class="pic" />
              <img :src="complete.end_photos[1]" class="pic" />
              <img :src="complete.end_photos[2]" class="pic" />
            </van-tag>
          </template>
        </van-field>
      </van-cell-group>

      <!-- 图片上传 -->

      <div style="margin-top: 20px">
        <van-button
          type="info"
          v-if="complete.status == '进行中'"
          @click="submitHandler"
          style="
            width: 100%;
            background-color: #f5a31f;
            border: 0;
            color: #6e4d40;
          "
          >完成工单</van-button
        ><span v-else></span>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "../../utils/request";
import axios from "axios";
import { Toast } from "vant";

export default {
  data() {
    return {
      complete: {},
      imgList: [],
      begin_photos: [],
    };
  },
  methods: {
    submitHandler() {
      if (this.imgList < 3) {
        Toast.fail("必须上传3张图片");
        return false;
      }
      let url = "/workorder/finishOrder";
      let params = {
        id: this.complete.id,
        photo1: this.imgList[0],
        photo2: this.imgList[1],
        photo3: this.imgList[2],
        finish_time: new Date().getTime(),
      };
      get(url, params).then((resp) => {
        Toast.success(resp.message);
        this.$router.go(-1);
      });
    },
    // 上传图片
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      // 将文件上传至服务器测试
      let url = "http://121.199.29.84:8001/file/upload";
      let params = new FormData();
      params.append("file", file.file);
      axios
        .post(url, params, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((response) => {
          file.status = "success";
          let url = "http://121.199.29.84:8888/group1/" + response.data.data.id;
          this.imgList.push({ url });
        })
        .catch((error) => {
          file.status = "failed";
          file.message = "上传失败";
          Toast("图片上传失败:" + error + " 请返回重新上传");
        });
    },
  },
  created() {
    this.complete = this.$route.query;
  },
};
</script>
<style scoped>
.content {
  padding: 15px;
}
.van-field__body .van-tag--default {
  background-color: #fff;
  color: #323233;
}
.pic {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  margin-left: -3.2px;
}
.too {
  width: 96%;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 17px;
  border-bottom: 1px solid #eeecec;
  background-color: #fff;
}
#tag {
  margin-left: -8px;
  font-size: 13.5px;
}
</style>